<template>
<!-- 登录注册页面 -->
  <div class="content">
      <div class="background"> 
      </div>
      <p class="animate__animated animate__fadeInDown"><span>宠物</span><br>&nbsp;寄领养平台</p>
     <a-card
      class="card animate__animated animate__fadeInRight"
      :tab-list="tabList"
      :defaultActiveTabKey="tabList[0].key"
      :activeTabKey="activeTabKey"
      @tabChange="handleTabChange"
      :hoverable="true"
    >
    <img class="cat" src="./img/cat.svg" alt="猫咪">
    <Login v-if="activeTabKey==='login'"></Login>
    <Register v-if="activeTabKey==='register'" @toLogin="toLogin"></Register>
    </a-card>
  </div>
</template>

<script>
import { Card } from 'ant-design-vue'
import Login from './Login/Login.vue'
import Register from './Register/Register.vue'

export default {
  name: "LgoinRegister",
  components: {ACard:Card, Login, Register},
  data() {
    return {
      activeTabKey:'login',
      tabList:[{key: 'login', tab: '登录'},{key: 'register', tab: '注册'}],
    };
  },
  methods: {
    handleTabChange(key) {
      this.activeTabKey = key;
    },
    toLogin() {
      this.activeTabKey = 'login';
    }
  }
};
</script>

<style scoped>
.content {
  height: 900px;
  width: 100%;
  position: relative;
}

.background {
  height: 100%;
  width: 100%;
  background-image: url("./img/loginbackground.jpg");
  background-size: cover;
  background-position: center;
  filter: blur(3px);
}

/* 字体样式 */
.content > p {
  position: absolute;
  top: 200px;
  left: 100px;
  z-index: 5;
  color: white;
  font-size: 3.5em;
  font-family: 'Courier New', Courier, monospace;
  letter-spacing: 0.75em;
  padding-left: 0.375em;
}

.content > p > span {
    font-size: 2em;
}

.card {
  width: 280px;
  height: 400px;
  position: absolute;
  top: 15%;
  right: 100px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.cat {
  width: 100px;
  height: 100px;
  position: absolute;
  top: -40px;
  right: -30px;
  animation: catMove 2s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

@keyframes catMove {
  from {
    top: -40px
  }
  to {
    top: -60px;
  }
}

/* 当屏幕宽度小于640px时表单居中显示 */
@media (max-width: 640px) {
  .card {
  width: 280px;
  height: 400px;
  position: absolute;
  top: 15%;
  right: calc((100% - 280px)/2);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  z-index: 100;
}
} 

</style>